@charset "UTF-8";
@import "reset";
@import "mixin";


$fs:64px;
html {
    font-size: $fs;
}

//将px单位换算成rem单位
@function r($px) {
    @return $px/$fs*1rem
}

//主要内容样式
//主要内容容器样式
body{
    width: 100%;
    //头部样式
    header{
        @include header;
    } 
    //头部空白
    .topNull{
        width: 100%;
        height: r(102px);
        background: #303133;
    }
    //checkbox
    #login-btn{
        display: none;
    }
    //个人信息弹窗
    .login-page{
        @include loginMask;
    }
    //点击弹出隐藏
    #login-btn:checked+.login-page{
        transform: translateX(0%);
        transform: translate3d(0%,0,0);
    }
    //主要内容部分
    .content{
        width: 100%;
        font-size: 0;
        //轮播图
        .banner{
            width: 100%;
            height: auto;
            img{
                width: 100%;
                height: r(357px);
            }
        }
        //最新发布
        .new{
            width: r(625px);
            font-size: r(29px);
            margin-left: r(15px);
            font-weight: bold;
            color: #ae0000;
            margin-top: r(19px);
            padding-bottom: r(16px);
            border-bottom: r(2px) solid #dbdbdb;
        }
        //黑色修饰条
        .black{
            width: r(59px);
            height: r(6px);
            background: black;
            margin-top: r(-6px);
            margin-left: r(15px);
        }
        //案例观点&课程
        .case-course{
            width: r(610px);
            margin: 0 auto;
            //案例观点
            .case1,.case2{
                display: block;
                width: 100%;
                padding-bottom: r(15px);
                border-bottom: r(2px) solid #dbdbdb;
                //左边内容
                .case-left{
                    width: r(185px);
                    height: r(121px);
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                //右边内容
                .case-right{
                    width: r(391px);
                    margin-left: r(31px);
                    span:first-of-type{
                        font-size: r(25px);
                        color: #646363;
                    }
                    span:nth-of-type(2){
                        font-size: r(17px);
                        margin-top: r(10px);
                        color: #646363;
                    }
                    p{
                        font-size: r(24px);
                        color: black;
                        margin-top: r(17px);
                    }
                }
            }
            .case1{
                padding-top: r(30px);
            }
            .case2{
                padding-top: r(9px);
            }
        }
    }
    //尾部空白
    .bottomNull{
        width: 100%;
        height: r(109px);
    }
    //尾部样式
    footer{
        @include footer;
        >a:first-of-type {
            color: #b60005;
        }
        >a:hover{
            color: #b60005;
        }
    }
}
